---
layout: default
title: Animate In Demo
description: When elements enter the viewport, they transition in from zero opacity and from the bottom.
image: /demos/animated.jpg
prism: true
externalJS: [ "https://unpkg.com/intersection-observer" ]
extraJS: [ "demos/animate-in.js" ]
---
<div class="container">
  <div class="row">
    <h2>Animated viewport entry</h2>
  </div>
</div>


<div class="container">
  <div id="grid" class="row my-shuffle-container shuffle--animatein">
    {% for item in site.data.items %}
        {% assign item = item %}
        {% include picture-item.html %}
    {% endfor %}
    {% for item in site.data.items %}
        {% assign item = item %}
        {% include picture-item.html %}
    {% endfor %}
    {% for item in site.data.items %}
        {% assign item = item %}
        {% include picture-item.html %}
    {% endfor %}
    <div class="col-1@sm col-1@xs my-sizer-element"></div>
  </div>
</div>


<div class="container has-code-block">
  <div class="row">
    <div class="col-12@sm">
      <h2>About this demo</h2>
      <p>This was inspired by <a href="http://tympanus.net/codrops/">codrops</a>&rsquo; demo <a href="http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/">Loading effects for grid items with css animations</a>.</p>
      <p><code>IntersectionObserver</code> is used to determine when the elements enter the viewport. <a href="https://github.com/WICG/IntersectionObserver/tree/gh-pages/polyfill">A polyfill</a> is included on the page for browsers which don't support it.</p>
    </div>
    <div class="col-12@sm">
      <h2>Source code for this demo</h2>
      <p>Link to <a href="{{ site.baseurl }}/js/demos/animate-in.js">demo source</a></p>
      <div class="code-block">
        <pre rel="JavaScript" data-src="{{ site.baseurl }}/js/demos/animate-in.js"></pre>
      </div>
    </div>
  </div>
</div>
